<script setup>
  import AddressCard from '@/components/address/AddressCard.vue'
  import useUserStore from "@/stores/user.js";
  import router from "@/router/index.js";
  import {computed} from "vue";


  // data
  const userStore = useUserStore();

  // methods
  // 获取当前用户地址
  const getCurAddress = index =>{
    userInfo.value.currentAddress = userInfo.value.addressList[index]
    // 返回上一级
    goBack()
  }

  const goBack = ()=>{
    router.go(-1)
  }

  // 跳转页面
  const goCreate = ()=>{
    router.push({
      name:'createAddress'
    })
  }

  // 获取当前用户的信息
  // 因为没有做登录，所以先默认张三

  // computed
  const userInfo = computed(()=>{
    return userStore.userList.find(item => item.name === 'zhangsan')
  })
</script>

<template>
  <div class="address_list">
    <div class="address_list_header">
      <span class="iconfont title_back" @click="goBack">&#xe697;</span>
      <div class="title_text">收货地址</div>
      <div class="create" @click="goCreate">新建</div>
    </div>
    <div class="address_list_content">
      <div class="address_list_content_item" v-for="(ele, index) in userInfo.addressList" :key="index">
        <AddressCard :addressList="ele" @click="getCurAddress(index)"/>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.address_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
    padding: .08rem .18rem;
    font-size: .16rem;
    color: $content-fontcolor;
    text-align: center;
    line-height: .24rem;
    background-color: $bgColor;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
  }

  &_content {
    margin-top: .58rem;
  }
}
</style>